<template>
  <div id="htmlarea">
  </div>
</template>

<script>
import EventBus from '../lib/eventbus';

let elems = {};

export default {
  name: 'htmlarea',
  data() {
    return {
    }
  },
  methods: {
     doScroll () {
       this.$nextTick(function(){
         var div = document.getElementById('left');
         div.scrollTop = div.scrollHeight;
       });
     }
  },
  mounted () {
    let container = document.getElementById('htmlarea');
    EventBus.$on('html-draw', ([type, name]) => {
      let elem = document.createElement(type);
      elem.id = name;

      if (!elems[type]) {
        elems[type] = [];
      }
      elems[type].push(elem);
      elem.id = type.toUpperCase() + elems[type].length;
      if (type === 'button') {
        elem.innerHTML = elem.id;
      } else if (type === 'input') {
        elem.value = elem.id;
      } else if (type === 'img') {
        elem.src = 'https://picsum.photos/200/200/?random&t=' + Math.random();
      }
      container.appendChild(elem);
      this.doScroll();
    });
  }
};
</script>

<style lang="less">
#htmlarea {
  
  text-align: left;
  
  padding: 20px;
  input {
    display: block;
    margin: 10px;
    border: 1px solid #848484; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    outline:0; 
    height:25px; 
    width: 275px; 
    padding-left:10px; 
    padding-right:10px; 
  }
  button {
    display: block;
    margin: 10px;
    border: 1px solid #848484; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    outline:0; 
    height:35px; 
    padding-left:10px; 
    padding-right: 10px;
  }
  img {
    box-shadow: 3px 3px 5px #888888;
    margin: 10px;
  }
}
</style>
